<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="yes" name="apple-touch-fullscreen" />
	<meta content="telephone=no,email=no" name="format-detection" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>玻璃宝产品详情</title>
	<link rel="stylesheet" type="text/css" href="/rs/css/index.css">
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js "></script>
	<script src="/rs/javascript/jquery.js"></script>
</head>
<body>
	<div id="wrap">
		<!-- banner -->
		<div id="banner">
			<img src="/rs/image/banner.jpg" alt="" width="100%">
		</div>
		<!-- 内容区域 -->
		<div class="title">
			<div class="details">
				产品详情
			</div>
		</div>
		<div class="icon-list">
			<div class="first"></div>
			<div class="two"></div>
			<div class="three"></div>
			<div class="four"></div>
		</div>
		<div class="text-detail">
			<div class="titles">产品信息</div>
			<div class="cont">
				<p>名称：玻璃宝</p>
				<p>厂家：和诚集团</p>
				<p>第三方保障：由平安保险为本服务提供100万的第三方履约保证保障。</p>
			</div>
		</div>
		<div class="text-detail">
			<div class="titles">功能说明</div>
			<div class="cont">
				<p>各车主提供车辆在使用过程中，发生本车玻璃单独破碎给予有偿保修的一种保障。</p>
			</div>
		</div>
		<div class="text-detail">
			<div class="titles">服务条件</div>
			<div class="cont">
				<p>1. 非营运车辆</p>
				<p>2. 车价在40万元以下</p>
				<p>3. 车龄在10年以下</p>
			</div>
		</div>
		<div class="text-detail">
			<div class="titles">保修费说明</div>
			<div class="cont">
				<p>1. 车价在15万元以下为200元/次</p>
				<p>2. 车价在15万-30万之间为400元/次</p>
				<p>3. 车价在30万-40万之间为1000元/次</p>
			</div>
		</div>
		<div class="button"><a href="/weixin/indexWithPara?openId=${openId}"><img src="/rs/image/now.png" alt="" width="100%"></a></div>
	</div>	
	<script>
		$(function() {
			var Top = $('.icon-list').offset().top;
			$(window).scroll(function() {
				if(Top < $(this).scrollTop()){
					$('.icon-list').addClass('current');
					if($(window).width() > 540){
						$('.current').css({'left':'50%', 'marginLeft': '-270px'})
					}
				} else{
					$('.current').css({'left':'0', 'marginLeft': '0'})
					$('.icon-list').removeClass('current')
				}
				for(var i=0; i<4; i++){
					if($(this).scrollTop() > $('.text-detail').eq(i).offset().top - 120){
						$('.icon-list div').eq(i).css({'background-position-y': '-113px'}).siblings().css({'background-position-y': '0'})
					}
				}
			})
			$('.icon-list div').click(function() {
				var i = $(this).index();
				if($('.icon-list').hasClass('current')){
					$("html,body").animate({scrollTop: $('.text-detail')[i].offsetTop -　90}, 500);
				}else{
					$("html,body").animate({scrollTop: $('.text-detail')[i].offsetTop -　210}, 500);
				}
			})
		})
	</script>
</body>
</html>